<!-- 创建新企业 -->
<template>
  <div class="page-select-existing-enterprise page-next">
    <Form :model="formData" label-position="top">
      <Row type="flex" justify="center" :gutter="20">
        <Col span="24">
          <h3>企业基本信息</h3>
        </Col>
        <Col span="12">
          <FormItem label="公司名称">
            <Input
              v-model="formData.input"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="证件类型">
            <Input
              v-model="formData.input"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="证件号码">
            <Input
              v-model="formData.input"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="公司住所">
            <Input
              v-model="formData.input"
              placeholder="Enter something..."
            ></Input>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="上传证件照片">
            <div class="update-photo">将证件照拖拽至此区域，或点击上传图片</div>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="业务范围">
            <Input
              v-model="formData.input"
              type="textarea"
              placeholder="请输入业务范围"
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="上级组织">
            <div class="select-company">
              <Select
                v-model="modelValue"
                style="width: 200px"
                placeholder="请选择产业"
              >
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
              <Select v-model="modelValue" placeholder="请选择企业">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
          </FormItem>
        </Col>
        <Divider />
        <Col span="24">
          <h3>企业服务能力</h3>
        </Col>
        <Col span="24">
          <FormItem label="产业标记">
            <CheckboxGroup v-model="formData.social">
              <Checkbox label="1">勘察</Checkbox>
              <Checkbox label="2">桩基</Checkbox>
              <Checkbox label="3">生态修复</Checkbox>
              <Checkbox label="4">建筑</Checkbox>
              <Checkbox label="5">装饰</Checkbox>
              <Checkbox label="6">地灾治理</Checkbox>
              <Checkbox label="7">海外项目</Checkbox>
              <Checkbox label="8">监理</Checkbox>
              <Checkbox label="9">建筑咨询</Checkbox>
              <Checkbox label="0">商砼</Checkbox>
              <Checkbox label="11">矿业服务</Checkbox>
              <Checkbox label="12">建材贸易</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </Col>
        <Col span="24">
          <h3>服务地区</h3>
        </Col>
        <Col span="24">
          <Row :gutter="20">
            <Col span="24">
              <div
                class="select-city"
                v-for="(item, index) in cityList"
                :key="item.id"
              >
                <Select
                  v-model="modelValue"
                  style="width: 200px; margin-right: 20px"
                  placeholder="请选择省份"
                >
                  <Option
                    v-for="item in cityList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
                <Select v-model="modelValue" placeholder="请选择市">
                  <Option
                    v-for="item in cityList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
                <div class="action-btn">
                  <span @click="addCity(index)"
                    ><Icon type="md-add-circle" :size="20"
                  /></span>
                  <span @click="delCity(index)" v-if="cityList.length > 1"
                    ><Icon type="md-remove-circle" :size="20"
                  /></span>
                </div>
              </div>
            </Col>
          </Row>
        </Col>
        <Col span="24">
          <h3>企业资质</h3>
        </Col>
        <Col span="24">
          <FormItem label="上传资质（选填）">
            <div class="update-photo">将证件照拖拽至此区域，或点击上传图片</div>
          </FormItem>
        </Col>
        <Col span="24">
          <h3>企业收益规则</h3>
        </Col>
        <Col span="24">
          <FormItem label="收益规则（选填）">
            <InputNumber style="width: 100%;" v-model="formData.numberValue" placeholder="请输入分层规则" />
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="上传规则说明">
            <div class="update-photo">将文件拖拽至此区域，或点击上传图片</div>
          </FormItem>
        </Col>
        <Col span="16">
          <div class="next-btn">
            <Button
              type="primary"
              :disabled="isBtnDisabled"
              @click="handleAgree"
              >确认创建企业并完成注册</Button
            >
          </div>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBtnDisabled: false,
      modelValue: "",
      cityList: [
        {
          id: 1,
          value:"1",
          label:'1'
        },
      ],
      formData: {
        input: "",
        social: [],
        numberValue:0
      },
    };
  },
  methods: {
    addCity() {
      this.cityList.push({
        id: Date.now(),
      });
    },
    delCity(index) {
      this.cityList.splice(index, 1);
    },
    handleAgree(){
      console.log(11)
      this.$emit("handleSuccess");
      
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.page-select-existing-enterprise {
  h3 {
    font-size: 18px;
    margin: 20px 0;
  }
}

.select-company {
  display: flex;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  ::v-deep(.ivu-select-selection) {
    border: none;
  }
}

.select-company-item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
}
.next-btn {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.ivu-btn {
  width: 100%;
}
.update-photo {
  padding: 20px;
  text-align: center;
  background: #eee;
  border-radius: 8px;
}
.select-city {
  display: flex;
  position: relative;
  margin-bottom: 20px;
  .action-btn {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    height: 100%;
    display: flex;
    align-items: center;
    span {
      display: block;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
